.catalog__container
  padding-top: 80px
  padding-bottom: 78px

.catalog__descr
  margin-bottom: 38px

.catalog__content-left
  width: 46.875%
  margin-right: 50px

.catalog__content-info
  display: none
  &-active
    display: block

.catalog__img-block
  margin-bottom: 33px
  max-width: 750px
  max-height: 470px

.catalog__content-img
  height: 470px
  object-fit: cover
  &-position
    object-position: 0 -185px

.catalog__content-descr
  font-weight: 400
  font-size: 16px
  line-height: 32px
  color: $colorDarkGray
  &-color
    font-size: 12px
    color: #999

.catalog__content-title
  margin-bottom: 2px
  font-weight: 600
  font-size: 24px
  color: $colorDarkGray

.catalog__content-right
  width: 50%

.catalog__item
  width: 100%
  height: 100%
  margin-top: -1px
  transition: border-color .2s ease-in-out
  cursor: pointer
  &-top
    border-top: 1px solid #cacaca
    border-bottom: 1px solid #cacaca
    transition: border-color .2s ease-in-out, color .2s ease-in-out
  &:hover
    position: relative
    border-color: $colorPurpleDefault
    z-index: 1
  &-top
    position: relative
    width: 100%
    padding-top: 33px
    padding-bottom: 28px
    justify-content: space-between
    align-items: center
  &-title
    font-weight: 600
    font-size: 24px
    line-height: 32px
    transition: color .2s ease-in-out

.catalog__item-top:focus-within,
.catalog__item-top:focus-within .catalog__item-button
  outline: none

.catalog__item-top:focus-within .catalog__item-title
  background-color: $colorPurpleDefault
  color: $white

.catalog__item-top:focus-within svg path,
.catalog__item-top:hover svg path,
.ui-accordion-header-active svg path
  fill: $colorLightPurple

.catalog__item-top:focus-within svg .catalog__svg-focus,
.catalog__item-top:hover:not(:active) svg .catalog__svg-focus
  stroke: $colorLightPurple

.catalog__item-top:active svg .catalog__svg-focus
  stroke: $colorPurpleDefault
  stroke-width: 2

.catalog__item-top:hover
  color: $colorPurpleDefault
  border-color: $colorPurpleDefault

.ui-accordion-header-active,
.catalog__item-top:active
  position: relative
  color: $colorDarkPurple
  border-color: $colorDarkPurple

.ui-accordion-header-active svg
  transform: rotate(180deg)
  & .catalog__svg-focus
    stroke: $colorPurpleDefault
    stroke-width: 2

.ui-accordion-header-icon
  display: none

.catalog__bottom-list-wrap
  padding: 25px 0
  min-height: 339px
  align-items: center

.catalog__bottom-list
  display: grid
  grid-auto-flow: column
  grid-template-rows: repeat(9, 1fr)
  grid-gap: 0 60px

.catalog__bottom-item
  font-weight: 400
  font-size: 16px
  line-height: 32px
  color: $colorDarkGray

.catalog__bottom-btn
  text-align: start
  color: $colorDarkGray
  &:focus-visible:not(:hover):not(:active)
    background-color: $colorPurpleDefault
    color: $colorPurpleDefault
    outline: none
  &:hover
    color: $colorPurpleDefault
  &:active
    color: $colorDarkPurple
  &-active
    color: $colorDarkPurple

.catalog__item-place
  margin-right: 24px
  position: relative
  width: 275px
  height: 189px
  border: 1px solid #b7b7b7
  &::before
    content: ''
    position: absolute
    top: 12px
    left: 12px
    right: 12px
    bottom: 12px
    max-width: 251px
    max-height: 165px
    background-color: #b7b7b7

.catalog__item-content
  max-width: 275px

.catalog__item-text
  margin-bottom: 5px
  font-weight: 600
  font-size: 24px
  color: $colorDarkGray

.catalog__item-descr
  margin-bottom: 5px
  font-weight: 400
  line-height: 21.79px
  font-size: 16px
  color: $colorDarkGray

.catalog__item-link
  font-weight: 600
  font-size: 16px
  color: $colorPurpleDefault
  transition: border .2s ease-in-out
  &:focus-visible
    color: $white
  &:hover
    color: $colorPurpleDefault
    border-bottom: 1px solid $colorPurpleDefault
  &:active
    color: $colorDarkPurple
    border-bottom: 1px solid $colorDarkPurple

@media (max-width: 1760px)
  .catalog__bottom-list
    grid-template-rows: repeat(12, 1fr)
    grid-gap: 0 55px

@media (max-width: 1420px)
  .catalog__container
    padding-bottom: 79px

  .catalog__content-left
    width: 50%

  .catalog__content-img
    height: 274px
    &-position
      object-position: 0 -100px

  .catalog__img-block
    max-height: 274px

  .catalog__content-title
    margin-bottom: 0.1px

@media (max-width: 1008px)
  .catalog__content
    flex-direction: column-reverse
    &-left
      margin-right: 0
      width: 100%
    &-right
      margin-bottom: 51px
      width: 100%

  .catalog__item-top
    padding-top: 32.5px

  .catalog__descr
    margin-bottom: 19px

  .catalog__bottom-list
    grid-template-rows: repeat(9, 1fr)
    grid-gap: 0 58px

  .catalog__img-block
    max-height: 419.5px

  .catalog__content-img
    height: 419.5px

  .catalog__container
    padding-bottom: 69.5px

@media (max-width: 687px)
  .catalog__content-right
    margin-bottom: 50px

  .catalog__descr
    display: none

  .catalog__item-title
    font-size: 18px

  .catalog__item-top
    padding-top: 20px
    padding-bottom: 20px

  .catalog__item-button svg
    width: 100%
    height: 100%

  .catalog__item-button
    width: 30px
    height: 30px

  .catalog__bottom-list-wrap
    min-height: unset
    padding: 21px 0

  .catalog__item-place
    height: 130px
    &::before
      top: 6px
      left: 6px
      right: 6px
      bottom: 6px

  .catalog__item-text
    margin-bottom: 5px
    font-size: 18px

  .catalog__bottom-list
    grid-template-rows: repeat(24, 1fr)

  .catalog__img-block
    margin-bottom: 23px
    max-height: 181px

  .catalog__content-img
    height: 181px

  .catalog__content-title
    margin-bottom: 5px
